<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据可视化</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/farm/farm.css" />
</head>
<body>

<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2>
                风速--气压
            </h2>
            <div class="chart" style="width: 420px;height: 255px"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
        <div class="panel line" >
            <h2>大气温度--土壤温度(℃)</h2>
            <div class="chart"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
        <div class="panel pie">
            <h2>雨量累积分布</h2>
            <div class="chart"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
    </div>
    <div class="column">
        <div class="no">
            <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
            <script>
                var t = null;
                t = setTimeout(time, 1000); //開始运行
                function time() {
                    clearTimeout(t); //清除定时器
                    dt = new Date();
                    var y = dt.getFullYear();
                    var mt = dt.getMonth() + 1;
                    var day = dt.getDate();
                    var h = dt.getHours(); //获取时
                    var m = dt.getMinutes(); //获取分
                    var s = dt.getSeconds(); //获取秒
                    document.querySelector(".showTime").innerHTML =
                        "当前时间：" +
                        y +
                        "年" +
                        mt +
                        "月" +
                        day +
                        "-" +
                        h +
                        "时" +
                        m +
                        "分" +
                        s +
                        "秒";
                    t = setTimeout(time, 1000); //设定定时器，循环运行
                }
            </script>
            <div id="maintext" style="width: 200px ;height: 100px" >
            </div>
            <!--<div class="no-hd">-->
                <!--<ul>-->
                    <!--<li>2</li>-->
                    <!--<li>11</li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--<div class="no-bd" id="no-bd">-->
                <!--<ul>-->
                    <!--<li>在线人数</li>-->
                    <!--<li>在线传感器数</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
        <div class="map">
            <div class="chart" >
                <div class="bar">
                    <h2 style="text-align:center">
                        <a href="javascript:;" style="font-size:large"> 室内 </a>
                        <a href="javascript:;" style="font-size:large"> 室外 </a>
                        <a href="javascript:;" style="font-size:large"> 大棚 </a>
                    </h2>
                </div>
                <div class="main">
                    <div class="quarter-div blue" id="four1"></div>
                    <div class="quarter-div green" id="four2"></div>
                    <div class="quarter-div orange" id="four3"></div>
                    <div class="quarter-div yellow" id="four4"></div>
                </div>
           </div>
        </div>
    </div>
    <div class="column">
        <div class="panel bar1" >
            <h2>实时温度--湿度</h2>
            <div class="chart" id="fushe"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
        <div class="panel line1" >
            <h2>大气湿度--土壤湿度(%RH)</h2>
            <div class="chart"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
        <div class="panel pie1">
            <h2>照度</h2>
            <div class="chart"></div>
            <!--<div class="panel-footer"></div>-->
        </div>
    </div>
</section>


<script src="../../js/flexible.js"></script>
<script src="../../js/echarts/echarts.min.js"></script>
<!-- 先引入jquery -->
<script src="../../js/libs/jquery-2.1.1.min.js"></script>
<!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
<script src="../../js/china.js"></script>
<script src="../../js/echarts/henan.js"></script>
<script type="text/javascript" src="../../js/echarts/echarts-gl.min.js"></script>
<script src="../../js/farm/index.js"></script>







</body>
</html>

<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
<script type="text/javascript">





var pers = checkPermission();

var example;
function init(){
	example = 
    	$('#dt-table').DataTable({
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"language": {
                "url": "/js/plugin/datatables/Chinese.lang"
            },
        	"ajax": {
        		"url" : "/farmWeathers",
        		"type":"get",
        		"data":function(d){
    				d.id = $("#id").val();
    			}
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",	
            "columns": [
				{"data" : "id", "defaultContent" : ""},
				{"data" : "最低温度", "defaultContent" : ""},
				{"data" : "最高温度", "defaultContent" : ""},
				{"data" : "质量", "defaultContent" : ""},
				{"data" : "状态", "defaultContent" : ""},
				{"data" : "日期", "defaultContent" : ""},
				{"data" : "地区", "defaultContent" : ""},
				{ 
								"data": "", 
								"defaultContent": "",
								"orderable":false,
						        "render": function (data, type, row) {
                		           var id = row['id'];
                		           var href = "updateFarmWeather.html?id=" + id;
                                   var edit = buttonEdit(href, "", pers);
                		           var del = buttonDel(id, "", pers);
                                   return edit + del;
                  	            }		
							},
                
            ],
           "order": [[ 0, "asc" ]]
        } );
}

layui.use('layer', function(){
    var layer = layui.layer;
});

function del(id){
	layer.confirm('确定要删除吗？', {
        btn : [ '确定', '取消' ]
    }, function() {
    	$.ajax({
            type : 'delete',
            url : '/farmWeathers/'+id,
            success : function(data) {
                example.ajax.reload();
                layer.msg("删除成功");
            }
        });
        
        layer.close(1);
    });
}

$("#searchBt").click(function(){
	example.ajax.reload();
});

init();
</script>
